<template>
  <div class="inviteList-wrap">
    <van-row>
      <van-col span="8">手机号</van-col>
      <van-col span="6">是否已实名</van-col>
      <van-col span="10">注册时间</van-col>
    </van-row>
    <van-pull-refresh v-model="formData.refreshing" @refresh="onRefresh">
      <van-list :loading="formData.loading" :finished="formData.finished" finished-text="" @load="onLoad">
        <van-row v-for="(item, index) in invitationList" :key="index">
          <van-col span="8">
            <div class="image" :style="'background-image: url(' + item.headImages + ')'"></div>{{ item.mobile }}
          </van-col>
          <van-col span="6">{{ item.idCard ? '已认证' : '未认证' }}</van-col>
          <van-col span="10" class="time">{{ item.createTime }}</van-col>
        </van-row>
        <van-empty :image="require('@/assets/image/none.png')" description="没有更多" v-if="invitationList.length <= 0" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
import { ipageInvitation } from "@/api/user";
export default defineComponent({
  setup() {
    const formData = reactive({
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: true,
      finished: false,
      refreshing: false
    })
    const invitationList = ref([])
    const onLoad = async () => {
      try {
        const res = await ipageInvitation(formData)
        formData.total = res.data.data.total
        if (formData.refreshing) {
          invitationList.value = [];
          formData.refreshing = false;
        }
        invitationList.value = invitationList.value.concat(res.data.data.records)
        formData.pageNum++
        formData.loading = false
        if (invitationList.value.length >= formData.total) {
          formData.finished = true;
        }
      } catch (error) {
        formData.loading = false
        formData.finished = true
      }
    }
    const onRefresh = async () => {
      formData.pageNum = 1
      formData.loading = true
      formData.finished = false
      formData.refreshing = true
      onLoad()
    }
    return {
      formData,
      invitationList,
      onLoad,
      onRefresh
    }
  }
})
</script>
<style lang="less" scoped>
.van-pull-refresh {
  height: calc(100vh - 300px) !important;
  overflow: auto !important;
}

.van-row {
  text-align: center;

  .van-col {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 60px;
    font-weight: 500;
    color: #ffffff;

    .image {
      margin-right: 5px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }

    &.time {
      font-size: 24px;
    }
  }
}

.inviteList-wrap {
  margin-top: 30px;

  .title {
    padding: 0 30px;
    display: flex;
    align-items: center;
    height: 80px;
    font-size: 34px;
    font-weight: 400;
    color: #b48457;
    background: #292b2a;

    .icon-yaoqing {
      font-size: 40px;
      margin-right: 10px;
    }

    span {
      margin-left: 15px;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px;
      font-size: 18px;
      font-weight: 400;
      color: #dca74b;
      background: #1a1a1a;
      border-radius: 10px;
    }
  }

  .van-list {
    padding: 30px;

    .van-row {
      text-align: center;

      .van-col {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        line-height: 60px;
        font-weight: 500;
        color: #ffffff;

        .image {
          margin-right: 5px;
          width: 50px;
          height: 50px;
          border-radius: 25px;
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }

        &.time {
          font-size: 24px;
        }
      }
    }
  }
}
</style>